<template>
    <div class="amap-page-container">
        <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
            <el-amap-marker vid="component-marker" :position="center"></el-amap-marker>
        </el-amap>
        <avue-detail :option="detailOption" v-model="form">
        </avue-detail>
    </div>
</template>

<script>
    import {fetchDetail} from '@/api/data/equip'
    import {tableOption} from '@/const/crud/data/equip'
    export default {
        name: 'amap-page',
        data() {
            return {
                count: 1,
                zoom: 14,
                center: [121.59996, 31.197646],
                form: {},
                detailOption: tableOption,
            };
        },
        created() {
            this.getData(this.$route.query.id)
        },
        methods: {
            getData(id) {
                fetchDetail(id).then(res => {
                    console.log(res.data.data)
                    this.form = res.data.data
                    // this.center = [res.data.data.lon, res.data.data.lat]
                    console.log(this.center)
                })
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .amap-demo {
        width: 100%;
        height: 40vh;
    }
</style>